import React from 'react';
import { Button, Row, Col } from 'antd';
import ComputeModeList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import ComputeModeAdd from './add';
import services from '../../../services/api';
import { message } from 'antd';

class ComputeModeIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'computeMode';
    this.addComponent = ComputeModeAdd;
    this.editComponent = ComputeModeAdd;
    this.listsComponent = ComputeModeList;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.queryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.queryTableParams = {};
    this.state = {
      list: [],
      totalCount: 0,
    };
  }
  componentDidMount() {
  }

  getComputeModeList = () => {
    services.computeMode.list().then(res => {
      if (res.code === 0) {
        res.data.list.forEach(item => {
          item.calculate_field_type = item.calculate_field_type.split(',');
        });
        this.setState({
          ...res.data
        });
      }
    });
  };

  queryList(params) {
    services[this.api].list(params).then(res => {
      if (res.code === 0) {
        res.data.list.forEach(item => {
          item.calculate_field_type = item.calculate_field_type.split(',');
        });
        this.setState({
          ...res.data
        });
      } else {
        message.error(res.msg);
      }
    });
  }

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'calculate_type_name',
        name: 'calculate_type_name',
        defaultValue: '',
        placeholder: '请输入计算方式名称进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add}>
              添加计算方式
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            edit={this.edit}
            queryList={this.freshQueryList}
            showDetail={this.showDetail}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
            queryTableParams={this.queryTableParams}
            getFilterTitle={this.getFilterTitle}
            rowKey='calculate_type_id'
          />
        </div>
      </div>
    );
  }
}

export default ComputeModeIndex;
